<template>
  <div class="w w-card">
    <h3>讲师介绍</h3>
    <el-divider />
    <div class="info">
      <div class="img">
        <img :src="teacherInfo.avatar" :alt="teacherInfo.name" width="120" />
      </div>
      <div class="content">
        <div class="title">
          <span>{{ teacherInfo.name }}</span>
          <svg-icon
            name="vip"
            class="svg"
            width="18px"
            height="18px"
            color="red"
          ></svg-icon>
          <span class="level">
            <el-tag>
              {{ teacherInfo.level == '0' ? '高级讲师' : '首席讲师' }}
            </el-tag>
          </span>
        </div>
        <div class="career">
          <span>资历:{{ teacherInfo.career }}</span>
        </div>
        <div class="intro">
          <p>{{ teacherInfo.intro }}</p>
        </div>
      </div>
    </div>
    <h3>主讲课程</h3>
    <el-divider />
    <!-- 无数据 -->
    <div v-if="teacherInfo.totalCourse == 0" class="w-100%">
      <div>
        <svg-icon
          name="sour_face"
          class="svg"
          width="150px"
          height="150px"
        ></svg-icon>
      </div>
      <span class="f-c-c mt-5 color-#909399">暂无课程，请稍后再试~</span>
    </div>
    <div class="course-list" v-else>
      <div
        class="course-item"
        v-for="course in teacherInfo.courseList"
        :key="course.courseId"
      >
        <router-link :to="`/course/${course.courseId}`">
          <div class="course-item-img">
            <img :src="course.coverUrl" alt="课程封面" />
            <div class="img-mask">
              <span class="btn">开始学习</span>
            </div>
          </div>
          <div class="course-item-content">
            <h3>{{ course.title }}</h3>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import type { TeacherVo } from '@/api/teacher/type'
import { reqTeacherInfo } from '@/api/teacher'

let teacherInfo = ref<TeacherVo>({
  teacherId: '',
  name: '',
  intro: '',
  career: '',
  level: '',
  avatar: '',
  delFlag: '',
  courseList: [],
  totalCourse: 0,
})
let route = useRoute()
const getTeacherInfo = async () => {
  let { data } = await reqTeacherInfo(route.params.teacherId as string)
  teacherInfo.value = data
}
onMounted(() => {
  getTeacherInfo()
})
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  .img {
    margin: 20px 20px;
  }
  .content {
    .title {
      display: flex;
      line-height: 36px;
      .svg {
        margin-left: 10px;
      }
      .level {
        margin-left: 20px;
      }
    }
    .career {
      color: #999;
    }
    .intro {
      color: #666;
      margin-top: 10px;
      p {
        text-indent: 24px;
      }
    }
  }
}
/* 课程列表 */
.course-list {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  .course-item {
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 80, 179, 0.08);
    transition: all 0.2s linear;
    &:hover {
      color: #2080f7;
      box-shadow: 0 8px 30px rgba(0, 80, 179, 0.12);
    }
    /* 遮罩层 */
    &:hover .course-item-img > .img-mask {
      opacity: 1;
    }
    &:hover .course-item-img > .img-mask > .btn {
      top: 50%;
      left: 50%;
      margin-left: -72px;
      margin-top: -16px;
    }
    .course-item-img {
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      &:hover img {
        transform: scale(1.05);
      }
      img {
        width: 100%;
        border-radius: 8px;
        transition: all 0.2s linear;
      }
      .img-mask {
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        height: 100%;
        left: 0;
        opacity: 0;
        filter: alpha(opacity = 0);
        right: 0;
        top: 0;
        transition: all 0.3s ease 0s;
        width: 100%;
        .btn {
          transition: 0.3s;
          border-radius: 16px;
          text-align: center;
          height: 32px;
          line-height: 32px;
          border: 1px solid;
          border-color: #fff;
          color: #fff;
          width: 120px;
          font-size: 18px;
          padding: 0 8px;
          //起始位置
          left: 50%;
          margin-left: -72px;
          margin-top: -16px;
          top: 100%;
          transition: 0.3s;
          position: absolute;
          &:hover {
            background: rgba($color: #fff, $alpha: 0.3);
            color: #000;
          }
        }
      }
    }
    .course-item-content {
      flex-direction: column;
      display: flex;
      justify-content: space-between;
      padding: 8px 12px 16px 12px;
      h3 {
        margin: 0 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
